<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景</title>
    <style>
        .d1{
            width: 500px;
            height: 500px;
            background-color: #bfa;
            /* 
            background-image: url("路径")    设置背景图片
	         可以同时设置背景图片和背景颜色，如果背景图小于元素，背景图将元素铺满，如果大于，部分背景无法显示
            */
            background-image: url("./pic/R-C1.png");
            /* 
            background-repeat   用来设置背景的重复方式
                可选值：
                repeat   默认值
                repeat-x  沿着x轴方向重复
                repeat-y  沿着y轴方向重复
                no-repeat  背景图片不重复
            */
            background-repeat: no-repeat;
            /* background-position  用来设置背景图片的位置
                设置方式：
                通过top  left   right   bottom   center  几个表示方位的词来设置背景图位置
                使用方位词时必须要同时指定两个值，如果只写一个值，另一个默认为center
                通过偏移量来指定图片位置   background-position: 50px  100px; 前面为水平偏移量，后者垂直方向偏移量
            */
            background-position: top center;
            padding: 5px;
            /* 
            设置背景的范围
                background-clip
                    可选值：
                        border-box  默认值，背景会出现在边框下边
                        padding-box 背景不会出现在边框，只出现在内容区和内边距
                        content-box 背景只会出现在内容区
                background-origin  背景图片的偏移量计算的原点
                    可选值：
                        padding-box 默认值，background-position从内边距开始计算
                        content-box  背景图片的偏移量从内容区开始计算
                        border-box  背景图片的偏移量从边框处计算
            */
            background-origin: content-box;
            background-clip: content-box;
            border: 10px red double;
            
        }
        .d{
            width: 500px;
            height: 500px;
            background-color: aqua;
            background-image: url("pic/R-C.jpg");
            /* 
            设置背景图片的大小
                background-size:     ;    第一个值表示宽度，第二个值为高度
                如果只写一个，第二个默认为auto
                    可选值：
                        cover   图片的比例不变，将元素铺满
                        contain   图片比例不变，将图片在元素中完整显示
            */
            background-size: cover;
        }
        /* background-attachment: fixed;  固定背景图片 */
        /* 
            background  背景相关的简写属性，所有背景相关样式都可以通过该样式来设置
            注意：background-size必须写在background-position的后边，并且使用 / 隔开
                    background-position/background-size
                background-origin   background-clip两个样式，origin要在clip前面

        */

        .box1{
            width: 500px;
            height: 500px;
            /* 
            linear-gradient()   线性渐变
                线性渐变的开头，可以指定一个渐变方向  (可省略不写)
                    to left
                    to right
                    to bottom
                    to top
                    xxxdeg   deg表示度数

                渐变可以同时指定多个颜色，多个颜色默认情况下平均分布

            repaeting-linear-gradient()  可以平铺的线性渐变
            */
            background-image: linear-gradient(50deg,red,black);
        }

        .box2{
            width: 500px;
            height: 500px;
            /* radial-gradient()  径向渐变（放射性效果） */
            /* 
                默认情况下，径向渐变的形状根据元素的形状来计算的
                    正方形 --> 圆形
                    长方形 --> 椭圆形
                    我们也可以手动指定渐变的大小
                    circle
                    ellipse
                    也可以指定渐变的位置

                    语法：
                        radial-gradient(大小 at 位置, 颜色 位置，颜色 位置，颜色 位置) ;
                        大小：  circle   圆形
                                ellipse   椭圆
                                等其他   见文档
                        位置： top bottom left right center
            */
            background-image: radial-gradient(red,yellow);
        }

    </style>
</head>
<body>
    <div class="d1"></div>
    <div class="d"></div>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>